excol: Explicitly hide collapsed children for openHiddenNodes to work #109
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Background
I'm opening this PR to address an issue noticed with Firefox 130 in the WCAG Understanding Docs: w3c/wcag#4086
Firefox 130 suddenly changed behavior of collapsed children under
details
; whereas it formerly rendered children as 0 height/width (as does every other browser I tested), 130 hides them but still renders them at original size. This fools the logic inopenHiddenNodes
, breaking any permalinks that target locations inside of collapsed sections.Solution in this PR
The most straightforward way to solve this seems to be via CSS, to ensure all browsers maintain the most common behavior, which allows
openHiddenNodes
to continue working as it typically has. I did some testing with NVDA and VO in an effort to confirm that this does not cause any noticeable difference to collapseddetails
elements.Note that this PR targets any nodes after
summary
within collapseddetails
, rather than specifically targetingdetails:not([open]) > div
. While the latter would match theexcol
template, it does not match the usage within the WCAG Understanding Docs (which places adl
directly aftersummary
), which relies on the styles but does not use the template (since it is not a Jekyll project - although now that it uses Eleventy, there might be room for separate/future consideration to more completely adopt this repo).How I tested
npm start
in its reponpm run build-css
in this repo, then serve its base folder locally at another port_includes/head.html
to point tohttp://localhost:<port>/...
(using the port for the server started in step 2)http://localhost:8080/understanding/three-flashes-or-below-threshold
and check that clicking any of the 3 links within the first paragraph inside the SC box jump to the correct place (rather than have no visible effect)Alternatives
An alternative might be to rewrite part of
openHiddenNodes
to explicitly search all the way up for collapseddetails
elements regardless of visibility, which would have a probably-negligible performance cost. (We could also potentially employclosest
if we feel its browser support is wide enough.)